﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> Elycharts  例子代码 :  柱 </title>


    <!-- 使用 Elycharts  需要 使用下面这三个 js 类库.   -->
    <script src="../../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="../../Scripts/raphael.js" type="text/javascript"></script>
    <script src="../../Scripts/elycharts.js" type="text/javascript"></script>



    <script type="text/javascript">
        $(document).ready(function () {



            $.elycharts.templates['line_basic_5'] = {
                
                // 柱状图的类型，也是 line
                type: 'line',

                // 边框，四个数值 [上，右，下，左]
                // 注： 如果边框太小，那么 标题可能显示不出来.
                margins: [10, 10, 25, 50],


                // style: { "background": "url(sites/elycharts.com/files/sky.jpg)" },


                defaultSeries: {
                    
                    plotProps: { opacity: .6 },

                    highlight: {
                        overlayProps: { fill: 'white', opacity: .5 }
                    },

                    /*
                    // 动画的部分，有点问题.
                    startAnimation: {
                    active: true,
                    type: 'grow'
                    },
                    */

                    tooltip: {
                        frameProps: false,
                        height: 20,
                        offset: [10, 0],
                        contentStyle: 'font-weight: bold'
                    }
                },

                // 每个项目的特殊设置.
                series: {
                    serie1: { color: 'red' },
                    serie2: { color: 'blue' }
                },

                // 显示标题.
                defaultAxis: {
                    labels: true
                },


                features: {
                    grid: {
                        draw: [true, false],
                        forceBorder: false,

                        // 这里是 横向的背景色.
                        // 注释下面2行， 背景将便单一颜色.
                        evenHProps: { fill: 'yellow', opacity: .2 },
                        oddHProps: { fill: 'green', opacity: .2 }
                    }
                }
            };


            $.elycharts.templates['line_basic_6'] = {
                // 柱状图的类型，也是 line
                type: 'line',

                // 边框，四个数值 [上，右，下，左]
                // 注： 如果边框太小，那么 标题可能显示不出来.
                margins: [10, 40, 40, 30],


                defaultSeries: {
                    highlight: {
                        newProps: { r: 8, opacity: 1 },
                        overlayProps: { fill: 'white', opacity: .2 }
                    }
                },


                // 每个项目的特殊设置.
                series: {
                    // color 为颜色，  tooltip 为  Tooltip 的框的样式.
                    serie1: { color: '90-#003000-#009000', tooltip: { frameProps: { "stroke": "green"}} },
                    serie2: { color: '90-#000060-#0000B0', tooltip: { frameProps: { "stroke": "blue"}} },
                    serie3: {
                        color: 'red',
                        rounded: false,

                        // dot 表示， 数值的地方， 是不是要显示一个点.
                        dot: true,

                        // dotProps 表示那个 点的显示， 这里是用白色， 宽度为2 的线，来画一个圈.
                        dotProps: { r: 2, stroke: 'white', 'stroke-width': 2, opacity: 5 },


                        plotProps: { 'stroke-width': 4, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }
                    }
                },


                defaultAxis: {
                    labels: true
                },


                axis: {
                    // 这里定义了， 横坐标的 标题文字的 字体，以及 倾斜的角度
                    x: { labelsRotate: 45, labelsProps: { font: '12px Verdana'} }


                },


                features: {
                    grid: { draw: true, forceBorder: true, ny: 5 }
                },

                barMargins: 10
            };





            // 柱状图的例子 1 
            $("#bar_chart_1").chart({
                // 使用的样式模板.
                template: "line_basic_5",

                // tooltips 为 鼠标停留在指定位置上， 显示的提示信息.
                tooltips: {
                    serie1: ["a 2010年人数", "a 2011年人数", "a 2012年人数", "a 2013年人数"],
                    serie2: ["b 2010年人数", "b 2011年人数", "b 2012年人数", "b 2013年人数"]
                },

                // 数据部分.
                values: {
                    serie1: [81, 80, 31, 38],
                    serie2: [44, 65, 17, 3]
                },


                defaultSeries: {
                    // 这里的  type: "bar"  决定了显示为 柱状图.
                    // 注释下面这行，画面将显示为线图.
                    type: "bar"
                },


                // labels 为横轴的标题信息.
                labels: ["2010年", "2011年", "2012年", "2013年"],



                barMargins: 10
            });



            // 柱状图的例子 2 
            $("#bar_chart_2").chart({

                // 模板.
                template: "line_basic_6",

                // tooltips 为 鼠标停留在指定位置上， 显示的提示信息.
                tooltips: {
                    serie1: ["a 2010年人数", "a 2011年人数", "a 2012年人数", "a 2013年人数"],
                    serie2: ["b 2010年人数", "b 2011年人数", "b 2012年人数", "b 2013年人数"],
                    serie3: ["c 2010百分比", "c 2011百分比", "c 2012百分比", "c 2013百分比"]
                },

                // 数据部分.
                values: {
                    serie1: [53, 53, 90, 88],
                    serie2: [65, 53, 55, 3],
                    serie3: [34, 27, 19, 61]
                },


                // labels 为横轴的标题信息.
                labels: ["2010年", "2011年", "2012年", "2013年"],



                defaultSeries: {
                    // 这里的  type: "bar"  决定了显示为 柱状图.
                    // 注释下面这行，画面将显示为线图.
                    type: "bar",

                    // 这里的  stacked: true  决定了  柱状图， 在一个单元上，是 堆起来 上下显示的。
                    // 注释下面这行，画面将显示为 柱状图， 在一个单元上， 是左右显示的.
                    stacked: true
                },

                series: {
                    serie3: {
                        type: "line",
                        stacked: false,
                        axis: "r"
                    }
                },
                axis: {
                    r: {
                        max: 100,
                        suffix: "%"
                    }
                }
            });


        });
    </script>




</head>
<body>

<h3>  柱状图的例子 1   </h3>

<div id="bar_chart_1"  style="width:600px;height:400px;border-style:solid;">  
</div>



<hr />
<h3>  柱状图的例子 2  </h3>

<div id="bar_chart_2"  style="width:600px;height:400px;border-style:solid;">  
</div>





</body>
</html>
